:root {
  /* -----------------------------------------*/
  /* ..............global-property............*/
  /* -----------------------------------------*/
  --color-black: #000000;
  --color-light-black: #324057;
  --color-extra-light-black: #475569;
  --color-white: white;
  --color-dark-white: #F9FAFC;
  --color-yellow: #D71718;
  /*--color-yellow: #FED800;*/
  /*--color-blue: #20A0FF;*/
  --color-blue: #D71718;
  --color-orange: #FFA500;
  --color-light-blue: #58B7FF;
  --color-extra-light-blue: color(var(--color-blue) s(75%) l(92%));
  --color-dark-blue: #1D8CE0;
  --color-success: #13ce66;
  --color-info: #20A0FF;
  --color-warning: #f7ba2a;
  --color-danger: #ff4949;
  --color-theme: var(--color-yellow);
  --color-primary: #CF1322;/*var(--color-blue);*/
  --color-tomato: #FF6347;
  --color-insert: #CF1322;/*#59d601;*/
  --color-delete: #CF1322;/*#ff4949;*/
  --color-update: #CF1322;/*#f7ba2a;*/
  --color-silver: #8492A6;
  --color-light-silver: #99A9BF;
  --color-extra-light-silver: #C0CCDA;
  --color-gray: #D3DCE6;
  --color-light-gray: #E5E9F2;
  --color-extra-light-gray: #EFF2F7;
  --assist-font-size-extra-large: 0.75rem;
  --assist-font-size-large: 0.65rem;
  --assist-font-size-normal: 0.6rem;
  --assist-font-size-small: 0.55rem;
  --assist-font-size-mini: 0.5rem;
  --disabled-border-normal: var(--color-gray);
  --disabled-fill-normal: var(--color-extra-light-gray);
  --disabled-color-normal: #bbb;
  --border-width-normal: 0.05rem;
  --border-style-normal: solid;
  --border-color-normal: var(--color-extra-light-silver);
  --border-color-hover: var(--color-light-silver);
  --border-normal: var(--border-width-normal) var(--border-style-normal) var(--border-color-normal);
  --border-radius-normal: 0.15rem;
  --border-radius-large: 0.25rem;
  --border-radius-circle: 100%;
  --panel-background-color: rgba(255, 255, 255, 0.8);
  /* z-index
  -------------------------- */
  --index-normal: 1;
  --index-top: 1000;
  --index-popper: 2000;
  /* Transition
  -------------------------- */
  --all-transition: all .3s cubic-bezier(.645, .045, .355, 1);
  --fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
  --fade-linear-transition: opacity 200ms linear;
  --md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms, opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
  --border-transition-base: border-color .3s cubic-bezier(.645, .045, .355, 1);
  --color-transition-base: color .2s cubic-bezier(.645, .045, .355, 1);
  /* -----------------------------------------*/
  /* ................t-dilog..................*/
  /* -----------------------------------------*/
  --dialog-box-shadow: 0rem 0rem 0.15rem rgba(0, 0, 0, 0.3);
  --dialog-tiny-width: 12rem;
  --dialog-mini-width: 15rem;
  --dialog-tomato-width: 16rem;
  --dialog-small-width: 20rem;
  --dialog-normal-width: 35rem;
  --dialog-large-width: 45rem;
  --dialog-close-hover-color: tint(var(--color-silver), 0.5);
  --dialog-header-btn-close-font-size: 0.8rem;
  --dialog-header-btn-close-color: var(--color-silver);
  --dialog-header-padding: 0.8rem 1.0rem 0.8rem 1.0rem;
  --dialog-body-padding: 0rem 1.0rem;
  --dialog-footer-padding: 0.8rem 1.0rem 0.8rem 1.0rem;
  /* ------------------------------------------*/
  /* ................t-button..................*/
  /* ------------------------------------------*/
  --button-default-color: var(--color-primary);
  --button-default-fill: var(--color-white);
  --button-default-border-color: var(--color-primary);
  --button-border-radius: var(--border-radius-normal);
  --button-default-border: var(--border-width-normal) var(--border-style-normal) var(--button-default-border-color);
  --button-hover-tint-percent: 20%;
  --button-active-shade-percent: 10%;
  --button-large-font-size: var(--assist-font-size-small);
  --button-large-padding-vertical: 0.25rem;
  --button-large-padding-horizontal: 0.65rem;
  --button-normal-font-size: var(--assist-font-size-small);
  --button-normal-padding-vertical: 0.25rem;
  --button-normal-padding-horizontal: 0.6rem;
  --button-small-font-size: var(--assist-font-size-mini);
  --button-small-padding-vertical: 0.25rem;
  --button-small-padding-horizontal: 0.55rem;
  --button-mini-font-size: var(--assist-font-size-mini);
  --button-mini-padding-vertical: 0.25rem;
  --button-mini-padding-horizontal: 0.5rem;
  --button-delete-border: var(--color-delete);
  --button-delete-color: var(--color-white);
  --button-delete-fill: var(--color-delete);
  --button-update-border: var(--color-update);
  --button-update-color: var(--color-white);
  --button-update-fill: var(--color-update);
  --button-insert-border: var(--color-insert);
  --button-insert-color: var(--color-white);
  --button-insert-fill: var(--color-insert);
  --button-primary-border: var(--color-primary);
  --button-primary-color: var(--color-white);
  --button-primary-fill: var(--color-primary);
  --button-success-border: var(--color-success);
  --button-success-color: var(--color-white);
  --button-success-fill: var(--color-success);
  --button-warning-border: var(--color-warning);
  --button-warning-color: var(--color-white);
  --button-warning-fill: var(--color-warning);
  --button-danger-border: var(--color-danger);
  --button-danger-color: var(--color-white);
  --button-danger-fill: var(--color-danger);
  --button-info-border: var(--color-info);
  --button-info-color: var(--color-white);
  --button-info-fill: var(--color-info);
  --button-disabled-color: var(--disabled-color-normal);
  --button-disabled-fill: var(--disabled-fill-normal);
  --button-disabled-border: var(--disabled-border-normal);
  /* -----------------------------------------*/
  /* ................t-input..................*/
  /* -----------------------------------------*/
  --input-border-radius: var(--border-radius-normal);
  --input-large-font-size: var(--assist-font-size-small);
  --input-large-padding-vertical: 0.45rem;
  --input-large-padding-horizontal: 0.55rem;
  --input-normal-font-size: var(--assist-font-size-small);
  --input-normal-padding-vertical: 0.35rem;
  --input-normal-padding-horizontal: 0.45rem;
  --input-small-font-size: var(--assist-font-size-small);
  --input-small-padding-vertical: 0.25rem;
  --input-small-padding-horizontal: 0.5rem;
  --input-mini-font-size: var(--assist-font-size-mini);
  --input-mini-padding-vertical: 0.2rem;
  --input-mini-padding-horizontal: 0.25rem;
  --input-line-height: 1.5;
  --input-font-size: var(--assist-font-size-small);
  --input-color: var(--color-black);
  --input-border: var(--border-normal);
  --input-hover-border-color: var(--border-color-hover);
  --input-active-border-color: var(--color-light-blue);
  --input-fill: var(--color-white);
  --input-placeholder-color: var(--color-light-silver);
  --input-disabled-color: var(--disabled-color-normal);
  --input-disabled-border: var(--disabled-fill-normal);
  --input-disabled-fill: var(--disabled-fill-normal);
  --input-disabled-placeholder-color: var(--color-extra-light-silver);
  /* -----------------------------------------*/
  /* ..............t-textarea.................*/
  /* -----------------------------------------*/
  --textarea-wrapper-width: 100%;
  --textarea-wrapper-height: 100%;
  --textarea-width: 100%;
  --textarea-height: 100%;
  --textarea-line-height: 1.8;
  /* -----------------------------------------*/
  /* ................v-table..................*/
  /* -----------------------------------------*/
  --v-table-width: 100%;
  --v-table-border-radius: var(--border-radius-normal);
  /* -----------------------------------------*/
  /* ................t-table..................*/
  /* -----------------------------------------*/
  /* t-table-border */
  /* for blue */
  --table-head-tr-top-border-blue: 0.05rem solid var(--color-light-blue);
  --table-head-tr-left-border-blue: var(--table-head-tr-top-border-blue);
  --table-head-tr-right-border-blue: var(--table-head-tr-top-border-blue);
  --table-head-th-border-color-blue: var(--color-light-blue);
  /* for extra-light-black */
  --table-head-tr-top-border-extra-light-black: 0.05rem solid var(--color-extra-light-black);
  --table-head-tr-left-border-extra-light-black: var(--table-head-tr-top-border-extra-light-black);
  --table-head-tr-right-border-extra-light-black: var(--table-head-tr-top-border-extra-light-black);
  --table-head-th-border-color-extra-light-black: var(--color-light-black);
  --table-head-th-color: var(--color-white);
  --table-body-tr-bottom-border: 0.05rem solid var(--color-light-gray);
  --table-body-tr-tail-bottom-border: 0.05rem solid var(--color-gray);
  --table-body-tr-left-border: var(--table-body-tr-tail-bottom-border);
  --table-body-tr-right-border: var(--table-body-tr-tail-bottom-border);
  /* t-table-background color */
  --table-head-tr-background-color-blue: var(--color-blue);
  --table-head-tr-background-color-extra-light-black: var(--color-extra-light-black);
  --table-body-tr-background-color: var(--color-white);
  --table-border-radius: var(--border-radius-normal);
  --table-font-size: var(--assist-font-size-normal);
  --table-color: var(--color-black);
  --table-body-td-border-color: var(--color-light-gray);
  --table-body-tr-background-color: var(--color-white);
  --table-body-tr-stripe-backgournd-color: var(--color-extra-light-gray);
  --table-head-th-height-large: 2.05rem;
  --table-body-td-height-large: 2rem;
  --table-head-th-padding-large: 0rem 0.3rem;
  --table-body-td-padding-large: var(--table-head-th-padding-large);
  --table-head-font-size-large: var(--assist-font-size-large);
  --table-body-font-size-large: var(--assist-font-size-large);
  --table-head-th-height-normal: 1.85rem;
  --table-body-td-height-normal: 1.8rem;
  --table-head-th-padding-normal: 0rem 0.1rem;
  --table-body-td-padding-normal: var(--table-head-th-padding-normal);
  --table-head-font-size-normal: var(--assist-font-size-small);
  --table-body-font-size-normal: var(--assist-font-size-small);
  --table-head-th-height-small: 1.3rem;
  --table-body-td-height-small: 1.25rem;
  --table-head-th-padding-small: 0.1rem 0.1rem;
  --table-body-td-padding-small: var(--table-head-th-padding-small);
  --table-head-font-size-small: var(--assist-font-size-small);
  --table-body-font-size-small: var(--assist-font-size-small);
  --table-head-th-height-mini: 1.3rem;
  --table-body-td-height-mini: 1.25rem;
  --table-head-th-padding-mini: 0rem;
  --table-body-td-padding-mini: var(--table-head-th-padding-mini);
  --table-head-font-size-mini: var(--assist-font-size-mini);
  --table-body-font-size-mini: var(--assist-font-size-mini);
  /* -----------------------------------------*/
  /* ................t-notice-box...................*/
  /* -----------------------------------------*/
  --notice-box-width: 12.5rem;
  --notice-box-z-index: 1000;
  --notice-text-message-font-size: var(--assist-font-size-small);
  --notice-text-message-color: var(--color-black);
  --notice-text-message-margin-bottom: 0.4rem;
  --notice-text-description-font-size: var(--assist-font-size-small);
  --notice-text-description-color: var(--color-black);
  --notice-icon-message-font-size: var(--notice-text-message-font-size);
  --notice-icon-message-color: var(--notice-text-message-color);
  --notice-icon-message-margin-bottom: var(--notice-text-message-margin-bottom);
  --notice-icon-message-margin-left: 2rem;
  --notice-icon-description-font-size: var(--notice-text-description-font-size);
  --notice-icon-description-color: var(--color-black);
  --notice-icon-description-margin-left: var(--notice-icon-message-margin-left);
  /* -----------------------------------------*/
  /* ................t-notice-box...................*/
  /* -----------------------------------------*/
  --notice-padding: 0.75rem;
  --notice-margin-bottom: 0.5rem;
  --notice-close-x-color: var(--color-silver);
  --notice-close-x-hover-color: tint(var(--color-silver), 0.5);
  --notice-close-x-font-size: 0.8rem;
  --dialog-header-padding: 0.8rem 1.0rem 0.8rem 1.0rem;
  --dialog-body-padding: 0rem 1.0rem;
  --dialog-footer-padding: 0.8rem 1.0rem 0.8rem 1.0rem;
  /* -----------------------------------------*/
  /* ................t-rate...................*/
  /* -----------------------------------------*/
  /* height */
  --rate-height: 1.25rem;
  --rate-item-height: 100%;
  --rate-item-pic-height: 100%;
  /* margin */
  --rate-pic-margin-right: 0.25rem;
  /* font-family */
  --rate-text-font-size: var(--assist-font-size-small);
  --rate-text-color: var(--color-primary);
  /* -----------------------------------------*/
  /* ................t-synchronize............*/
  /* -----------------------------------------*/
  /* height */
  --synchronize-width: 3rem;
  --synchronize-height: 1.5rem;
  --synchronize-state-title-width: 5rem;
  --synchronize-state-title-height: var(--synchronize-height);
  --synchronize-state-dot-width: 1rem;
  --synchronize-state-dot-height: var(--synchronize-height);
  /* font-size */
  --synchronize-color: var(--color-white);
  --synchronize-font-size: var(--assist-font-size-mini);
  /* color */
  --synchronize-state-dot-todo-color: var(--color-warning);
  --synchronize-state-dot-doing-color: var(--color-primary);
  --synchronize-state-dot-success-color: var(--color-success);
  --synchronize-state-dot-failure-color: var(--color-danger);
  /* -----------------------------------------*/
  /* ...............t-dropdown................*/
  /* -----------------------------------------*/
  --dropdown-zindex: 1000;
  --dropdown-margin: 0.65rem;
  --dropdown-box-shadow: 0px 0px var(--dropdown-margin) rgba(0, 0, 0, 0.3);
  --dropdown-border-radius: var(--border-radius-normal);
  /* -----------------------------------------*/
  /* ..................html...................*/
  /* -----------------------------------------*/
  --html-width: 100%;
  --html-height: 100%;
  --html-font-size: 12px;
  /* -----------------------------------------*/
  /* ..................body...................*/
  /* -----------------------------------------*/
  --body-width: 100%;
  --body-height: 100%;
  --body-background-color: var(--color-white);
  /* -----------------------------------------*/
  /* ..................app....................*/
  /* -----------------------------------------*/
  --app-width: 100%;
  --app-height: 100%;
  /* -----------------------------------------*/
  /* ...............app-service...................*/
  /* -----------------------------------------*/
  /* width */
  --app-service-width: 50rem;
  --app-service-navbar-wrapper-width: 100%;
  --app-service-center-wrapper-width: 100%;
  /* height */
  --app-service-height: 24.2rem;
  --app-service-navbar-wrapper-height: 2rem;
  --app-service-center-wrapper-top: var(--app-service-navbar-wrapper-height);
  --app-service-center-wrapper-bottom: 0;
  /* -----------------------------------------*/
  /* ...........app-service-navbar...................*/
  /* -----------------------------------------*/
  /* global property */
  --app-service-navbar-color: var(--color-black);
  --app-service-navbar-font-size: var(--assist-font-size-small);
  --app-service-navbar-background-color: #404040; /*color( var(--color-yellow) a(98.5%))*/;
  --app-service-navbar-height: var(--app-service-navbar-wrapper-height);
  --app-service-navbar-brand-wrapper-height: var(--app-service-navbar-height);
  --app-service-navbar-items-wrapper-height: 2.0rem;
  --app-service-navbar-icons-wrapper-height: var(--app-service-navbar-items-wrapper-height);
  --app-service-navbar-funcs-wrapper-height: var(--app-service-navbar-items-wrapper-height);
  --app-service-navbar-width: 100%;
  --app-service-navbar-brand-wrapper-width: 30%;
  --app-service-navbar-items-wrapper-width: 32%;
  --app-service-navbar-icons-wrapper-width: 6%;
  --app-service-navbar-funcs-wrapper-width: 25%;
  --app-service-navbar-funcs-wrapper-single-func-width: 100%;
  /* 1 func */
  --app-service-navbar-funcs-wrapper-double-func-width: 49.75%;
  /* 2 func and 1 space, space = 3%*/
  --app-service-navbar-funcs-wrapper-double-func-vertical-division-width: 0.4%;
  --app-service-navbar-funcs-wrapper-double-func-vertical-division-height: 30%;
  --app-service-navbar-funcs-wrapper-double-func-vertical-division-background-color: var(--color-white);
  /* item property */
  --app-service-navbar-items-wrapper-item-width: 30%;
  /* 7 item */
  --app-service-navbar-items-wrapper-item-margin: 0 1%;
  --app-service-navbar-items-wrapper-item-height: var(--app-service-navbar-items-wrapper-height);
  --app-service-navbar-items-wrapper-active-item-border: var(--border-width-normal) var(--border-style-normal) var(--color-yellow);
  --app-service-navbar-items-wrapper-active-item-border-radius: var(--border-radius-normal);
  --app-service-navbar-items-wrapper-active-item-background-color: var(--color-yellow); /*shade(var(--color-yellow), 0.65);*/
  /* icon property */
  --app-service-navbar-icons-wrapper-icon-width: 100%;
  --app-service-navbar-icons-wrapper-icon-margin: 0 1%;
  --app-service-navbar-icons-wrapper-icon-height: var(--app-service-navbar-icons-wrapper-height);
  --app-service-navbar-icons-wrapper-icon-font-size: 0.75rem;
  --app-service-navbar-icons-wrapper-icon-font-weight: bolder;
  /* -----------------------------------------*/
  /* ............app-service-center...........*/
  /* -----------------------------------------*/
  /* width */
  --app-service-center-width: 47.5rem;
  --app-service-center-sidebar-wrapper-width: 12rem;
  --app-service-center-sidebar-wrapper-margin: 0rem 0.5rem 0rem 1.5rem;
  --app-service-center-content-wrapper-width: 31.5rem;
  --app-service-center-content-wrapper-margin: 0rem 1.5rem 0rem 0.5rem;
  /* height */
  --app-service-center-height: 20.5rem;
  --app-service-center-sidebar-wrapper-height: var(--app-service-center-height);
  --app-service-center-content-wrapper-height: var(--app-service-center-height);
  /* -----------------------------------------*/
  /* .......app-service-center-sidebar........*/
  /* -----------------------------------------*/
  /* width */
  --app-service-center-sidebar-width: 100%;
  --app-service-center-sidebar-inner-power-wrapper-width: 100%;
  --app-service-center-sidebar-outer-power-wrapper-width: 100%;
  /* height */
  --app-service-center-sidebar-height: var(--app-service-center-sidebar-wrapper-height);
  /* 20.5rem */
  --app-service-center-sidebar-inner-power-wrapper-height: 7rem;
  --app-service-center-sidebar-inner-power-wrapper-margin-bottom: 1rem;
  --app-service-center-sidebar-outer-power-wrapper-height: 12.5rem;
  /* ------------------------------------------*/
  /* ..app-service-center-sidebar-inner-power..*/
  /* ------------------------------------------*/
  --app-service-center-sidebar-inner-power-width: 100%;
  --app-service-center-sidebar-inner-power-height: var(--app-service-center-sidebar-inner-power-wrapper-height);
  /* width */
  --app-service-center-sidebar-inner-power-title-width: 100%;
  --app-service-center-sidebar-inner-power-content-width: 100%;
  --app-service-center-sidebar-inner-power-author-width: 100%;
  /* height */
  --app-service-center-sidebar-inner-power-padding: 0.4rem 0.75rem 0.4rem 0.75rem;
  --app-service-center-sidebar-inner-power-title-height: 1rem;
  --app-service-center-sidebar-inner-power-title-margin-bottom: 0.5rem;
  --app-service-center-sidebar-inner-power-content-height: 3rem;
  --app-service-center-sidebar-inner-power-content-margin-bottom: 0.5rem;
  --app-service-center-sidebar-inner-power-author-height: 1rem;
  /* border */
  --app-service-center-sidebar-inner-power-border-radius: var(--border-radius-normal);
  /* font-size */
  --app-service-center-sidebar-inner-power-title-font-size: var(--assist-font-size-normal);
  --app-service-center-sidebar-inner-power-content-font-size: var(--assist-font-size-small);
  --app-service-center-sidebar-inner-power-author-font-size: var(--assist-font-size-small);
  /* color */
  --app-service-center-sidebar-inner-power-color: var(--color-black);
  /* back-ground */
  --app-service-center-sidebar-inner-power-background-color: var(--panel-background-color);
  /* line-height */
  --app-service-center-sidebar-inner-power-content-line-height: 2.0;
  /* ------------------------------------------*/
  /* ..app-service-center-sidebar-outer-power..*/
  /* ------------------------------------------*/
  --app-service-center-sidebar-outer-power-width: 100%;
  --app-service-center-sidebar-outer-power-height: 100%;
  /* width */
  --app-service-center-sidebar-outer-power-title-width: 100%;
  --app-service-center-sidebar-outer-power-star-width: 100%;
  --app-service-center-sidebar-outer-power-table-width: 100%;
  /* height */
  --app-service-center-sidebar-outer-power-padding: 0.4rem 0.75rem 0.35rem 0.75rem;
  --app-service-center-sidebar-outer-power-title-height: 1rem;
  --app-service-center-sidebar-outer-power-title-margin-bottom: 0.25rem;
  --app-service-center-sidebar-outer-power-star-height: 2.0rem;
  --app-service-center-sidebar-outer-power-star-margin-bottom: 0.55rem;
  --app-service-center-sidebar-outer-power-table-height: 8rem;
  --app-service-center-sidebar-outer-power-content-height: 10.55rem;
  /* border */
  --app-service-center-sidebar-outer-power-border-radius: var(--border-radius-normal);
  /* font-size */
  --app-service-center-sidebar-outer-power-font-size: var(--assist-font-size-small);
  --app-service-center-sidebar-outer-power-title-font-size: var(--assist-font-size-normal);
  /* color */
  --app-service-center-sidebar-outer-power-color: var(--color-black);
  /* back-ground */
  --app-service-center-sidebar-outer-power-background-color: var(--panel-background-color);
  /* -----------------------------------------*/
  /* ......app-service-center-content.........*/
  /* -----------------------------------------*/
  --app-service-center-content-width: 100%;
  --app-service-center-content-height: var(--app-service-center-content-wrapper-height);
  /* -------------------------------------------------*/
  /* ......app-service-center-content-module..........*/
  /* -------------------------------------------------*/
  /* 31.5rem - 0.75rem * 2 = 30rem */
  --app-service-center-content-module-width: 100%;
  --app-service-center-content-module-top-wrapper-width: 100%;
  --app-service-center-content-module-center-wrapper-width: 100%;
  --app-service-center-content-module-bottom-wrapper-width: 100%;
  /* 20.5rem - 0.75rem * 2 = 19rem */
  --app-service-center-content-module-height: 100%;
  --app-service-center-content-module-top-wrapper-height: 1.5rem;
  --app-service-center-content-module-center-wrapper-height: 16.5rem;
  --app-service-center-content-module-bottom-wrapper-height: 1.5rem;
  /* padding */
  --app-service-center-content-module-padding: 0.55rem 0.75rem 0.45rem 0.75rem;
  /* background */
  --app-service-center-content-module-background-color: var(--panel-background-color);
  /* border */
  --app-service-center-content-module-border-radius: var(--border-radius-normal);
  /* font-size */
  /* -------------------------------------------------*/
  /* ......app-service-center-content-charter.........*/
  /* -------------------------------------------------*/
  /* width */
  --app-service-center-content-module-for-charter-top-width: 100%;
  --app-service-center-content-module-for-charter-top-title-wrapper-width: 100%;
  --app-service-center-content-module-for-charter-top-title-wrapper-title-width: 4.5rem;
  --app-service-center-content-module-for-charter-center-width: 100%;
  --app-service-center-content-module-for-charter-bottom-width: 100%;
  --app-service-center-content-module-for-charter-bottom-btn-wrapper-width: 100%;
  /* top => 2.5rem inherit from --app-service-center-content-module-top-wrapper-height*/
  --app-service-center-content-module-for-charter-top-height: var(--app-service-center-content-module-top-wrapper-height);
  --app-service-center-content-module-for-charter-top-title-wrapper-height: var(--app-service-center-content-module-for-charter-top-height);
  --app-service-center-content-module-for-charter-top-title-wrapper-title-height: 85%;
  /* center => 14rem inherit from --app-service-center-content-module-center-wrapper-height */
  --app-service-center-content-module-for-charter-center-height: var(--app-service-center-content-module-center-wrapper-height);
  --app-service-center-content-module-for-charter-center-btn-wrapper-height: var(--app-service-center-content-module-for-charter-center-height);
  /* bottom => 2.5rem inherit from --app-service-center-content-module-bottom-wrapper-height*/
  --app-service-center-content-module-for-charter-bottom-height: var(--app-service-center-content-module-bottom-wrapper-height);
  --app-service-center-content-module-for-charter-bottom-btn-wrapper-height: var(--app-service-center-content-module-for-charter-bottom-height);
  --app-service-center-content-module-for-charter-top-title-wrapper-title-font-size: var(--assist-font-size-extra-large);
  --app-service-center-content-module-for-charter-top-title-wrapper-title-font-weight: bold;
  /* -------------------------------------------------*/
  /* ....app-service-center-content-charter-dialog....*/
  /* -------------------------------------------------*/
  /* ...update-dialog...*/
  --app-service-center-content-charter-update-dialog-content-width: 100%;
  --app-service-center-content-charter-update-dialog-content-height: 18.5rem;
  --app-service-center-content-charter-update-dialog-content-lpart-width: 50%;
  --app-service-center-content-charter-update-dialog-content-lpart-height: 100%;
  --app-service-center-content-charter-update-dialog-content-rpart-width: 50%;
  --app-service-center-content-charter-update-dialog-content-rpart-height: 100%;
  /* ...create-dialog...*/
  --app-service-center-content-charter-create-dialog-content-width: 100%;
  --app-service-center-content-charter-create-dialog-content-height: 18.5rem;
  
  --app-service-center-content-charter-dismiss-dialog-content-width: 100%;
  --app-service-center-content-charter-dismiss-dialog-content-height: 9.5rem;
  
  
  /* -------------------------------------------------*/
  /* ....app-service-center-content-charter-dialog....*/
  /* -------------------------------------------------*/
  /* ...update-dialog...*/
  --app-service-center-content-habit-update-dialog-content-width: 100%;
  --app-service-center-content-habit-update-dialog-content-height: 18.5rem;
  --app-service-center-content-habit-update-dialog-content-lpart-width: 50%;
  --app-service-center-content-habit-update-dialog-content-lpart-height: 100%;
  /* ...create-dialog...*/
  --app-service-center-content-habit-create-dialog-content-width: 100%;
  --app-service-center-content-habit-create-dialog-content-height: 18.5rem;
  
  /* -------------------------------------------------*/
  /* ....app-service-center-content-state-dialog....*/
  /* -------------------------------------------------*/
  /* ...update-dialog...*/
  --app-service-center-content-state-update-dialog-content-width: 100%;
  --app-service-center-content-state-update-dialog-content-height: 10rem;
  --app-service-center-content-state-update-dialog-content-lpart-width: 50%;
  --app-service-center-content-state-update-dialog-content-lpart-height: 100%;

  /* -------------------------------------------------*/
  /* ....app-service-center-content-topic-dialog....*/
  /* -------------------------------------------------*/  
  /* ...update-dialog...*/
  --app-service-center-content-topic-update-dialog-content-width: 100%;
  --app-service-center-content-topic-update-dialog-content-height: 18.5rem;
  --app-service-center-content-topic-update-dialog-content-lpart-width: 50%;
  --app-service-center-content-topic-update-dialog-content-lpart-height: 100%;
  /* ...create-dialog...*/
  --app-service-center-content-topic-create-dialog-content-width: 100%;
  --app-service-center-content-topic-create-dialog-content-height: 18.5rem;
  /* ------------------------------------------------*/
  /* ......app-service-center-content-habit.........*/
  /* ------------------------------------------------*/
  /* width */
  --app-service-center-content-module-for-habit-top-width: 100%;
  --app-service-center-content-module-for-habit-top-title-wrapper-width: 100%;
  --app-service-center-content-module-for-habit-top-title-wrapper-title-width: 4.5rem;
  --app-service-center-content-module-for-habit-center-width: 100%;
  --app-service-center-content-module-for-habit-bottom-width: 100%;
  --app-service-center-content-module-for-habit-bottom-btn-wrapper-width: 100%;
  /* top => 2.5rem inherit from --app-service-center-content-module-top-wrapper-height*/
  --app-service-center-content-module-for-habit-top-height: var(--app-service-center-content-module-top-wrapper-height);
  --app-service-center-content-module-for-habit-top-title-wrapper-height: var(--app-service-center-content-module-for-habit-top-height);
  --app-service-center-content-module-for-habit-top-title-wrapper-title-height: 85%;
  /* center => 14rem inherit from --app-service-center-content-module-center-wrapper-height */
  --app-service-center-content-module-for-habit-center-height: var(--app-service-center-content-module-center-wrapper-height);
  --app-service-center-content-module-for-habit-center-btn-wrapper-height: var(--app-service-center-content-module-for-habit-center-height);
  /* bottom => 2.5rem inherit from --app-service-center-content-module-bottom-wrapper-height*/
  --app-service-center-content-module-for-habit-bottom-height: var(--app-service-center-content-module-bottom-wrapper-height);
  --app-service-center-content-module-for-habit-bottom-btn-wrapper-height: var(--app-service-center-content-module-for-habit-bottom-height);
  --app-service-center-content-module-for-habit-top-title-wrapper-title-font-size: var(--assist-font-size-extra-large);
  --app-service-center-content-module-for-habit-top-title-wrapper-title-font-weight: bold;
  /* -------------------------------------------------*/
  /* ......app-service-center-content-project.........*/
  /* -------------------------------------------------*/
  /* width */
  --app-service-center-content-module-for-project-top-width: 100%;
  --app-service-center-content-module-for-project-top-title-wrapper-width: 100%;
  --app-service-center-content-module-for-project-top-title-wrapper-title-width: 4.5rem;
  --app-service-center-content-module-for-project-center-width: 100%;
  --app-service-center-content-module-for-project-bottom-width: 100%;
  --app-service-center-content-module-for-project-bottom-btn-wrapper-width: 100%;
  /* top => 2.5rem inherit from --app-service-center-content-module-top-wrapper-height*/
  --app-service-center-content-module-for-project-top-height: var(--app-service-center-content-module-top-wrapper-height);
  --app-service-center-content-module-for-project-top-title-wrapper-height: var(--app-service-center-content-module-for-project-top-height);
  --app-service-center-content-module-for-project-top-title-wrapper-title-height: var(--app-service-center-content-module-for-project-top-title-wrapper-height);
  /* center => 14rem inherit from --app-service-center-content-module-center-wrapper-height */
  --app-service-center-content-module-for-project-center-height: var(--app-service-center-content-module-center-wrapper-height);
  --app-service-center-content-module-for-project-center-btn-wrapper-height: var(--app-service-center-content-module-for-project-center-height);
  /* bottom => 2.5rem inherit from --app-service-center-content-module-bottom-wrapper-height*/
  --app-service-center-content-module-for-project-bottom-height: var(--app-service-center-content-module-bottom-wrapper-height);
  --app-service-center-content-module-for-project-bottom-btn-wrapper-height: var(--app-service-center-content-module-for-project-bottom-height);
  /* font-weight */
  --app-service-center-content-module-for-project-top-title-wrapper-title-font-size: var(--assist-font-size-extra-large);
  --app-service-center-content-module-for-project-top-title-wrapper-title-font-weight: bold;
  /* -------------------------------------------------*/
  /* ......app-service-center-content-monitor.........*/
  /* -------------------------------------------------*/
  /* width */
  --app-service-center-content-module-for-monitor-top-width: 100%;
  --app-service-center-content-module-for-monitor-top-title-wrapper-width: 100%;
  --app-service-center-content-module-for-monitor-top-title-wrapper-title-width: 4.5rem;
  --app-service-center-content-module-for-monitor-center-width: 100%;
  --app-service-center-content-module-for-monitor-bottom-width: 100%;
  --app-service-center-content-module-for-monitor-bottom-btn-wrapper-width: 100%;
  /* top => 2.5rem inherit from --app-service-center-content-module-top-wrapper-height*/
  --app-service-center-content-module-for-monitor-top-height: var(--app-service-center-content-module-top-wrapper-height);
  --app-service-center-content-module-for-monitor-top-title-wrapper-height: var(--app-service-center-content-module-for-monitor-top-height);
  --app-service-center-content-module-for-monitor-top-title-wrapper-title-height: 85%;
  /* center => 14rem inherit from --app-service-center-content-module-center-wrapper-height */
  --app-service-center-content-module-for-monitor-center-height: var(--app-service-center-content-module-center-wrapper-height);
  --app-service-center-content-module-for-monitor-center-btn-wrapper-height: var(--app-service-center-content-module-for-monitor-center-height);
  /* bottom => 2.5rem inherit from --app-service-center-content-module-bottom-wrapper-height*/
  --app-service-center-content-module-for-monitor-bottom-height: var(--app-service-center-content-module-bottom-wrapper-height);
  --app-service-center-content-module-for-monitor-bottom-btn-wrapper-height: var(--app-service-center-content-module-for-monitor-bottom-height);
  --app-service-center-content-module-for-monitor-top-title-wrapper-title-font-size: var(--assist-font-size-extra-large);
  --app-service-center-content-module-for-monitor-top-title-wrapper-title-font-weight: bold;
  /* -----------------------------------------------*/
  /* ......app-service-center-content-class.........*/
  /* -----------------------------------------------*/
  /* width */
  --app-service-center-content-module-for-class-top-width: 100%;
  --app-service-center-content-module-for-class-top-title-wrapper-width: 100%;
  --app-service-center-content-module-for-class-top-title-wrapper-title-width: 4.5rem;
  --app-service-center-content-module-for-class-center-width: 100%;
  --app-service-center-content-module-for-class-bottom-width: 100%;
  --app-service-center-content-module-for-class-bottom-btn-wrapper-width: 100%;
  /* top => 2.5rem inherit from --app-service-center-content-module-top-wrapper-height*/
  --app-service-center-content-module-for-class-top-height: var(--app-service-center-content-module-top-wrapper-height);
  --app-service-center-content-module-for-class-top-title-wrapper-height: var(--app-service-center-content-module-for-class-top-height);
  --app-service-center-content-module-for-class-top-title-wrapper-title-height: 85%;
  /* center => 14rem inherit from --app-service-center-content-module-center-wrapper-height */
  --app-service-center-content-module-for-class-center-height: var(--app-service-center-content-module-center-wrapper-height);
  --app-service-center-content-module-for-class-center-btn-wrapper-height: var(--app-service-center-content-module-for-class-center-height);
  /* bottom => 2.5rem inherit from --app-service-center-content-module-bottom-wrapper-height*/
  --app-service-center-content-module-for-class-bottom-height: var(--app-service-center-content-module-bottom-wrapper-height);
  --app-service-center-content-module-for-class-bottom-btn-wrapper-height: var(--app-service-center-content-module-for-class-bottom-height);
  --app-service-center-content-module-for-class-top-title-wrapper-title-font-size: var(--assist-font-size-extra-large);
  --app-service-center-content-module-for-class-top-title-wrapper-title-font-weight: bold;
  /* ------------------------------------------------*/
  /* ......app-service-center-content-topic.........*/
  /* ------------------------------------------------*/
  /* width */
  --app-service-center-content-module-for-topic-top-width: 100%;
  --app-service-center-content-module-for-topic-top-title-wrapper-width: 40%;
  --app-service-center-content-module-for-topic-top-title-wrapper-title-width: 4.5rem;
  --app-service-center-content-module-for-topic-top-input-wrapper-width: 25%;
  --app-service-center-content-module-for-topic-center-width: 100%;
  --app-service-center-content-module-for-topic-bottom-width: 100%;
  --app-service-center-content-module-for-topic-bottom-btn-wrapper-width: 20%;
  /* top => 2.5rem inherit from --app-service-center-content-module-top-wrapper-height*/
  --app-service-center-content-module-for-topic-top-height: var(--app-service-center-content-module-top-wrapper-height);
  --app-service-center-content-module-for-topic-top-title-wrapper-height: var(--app-service-center-content-module-for-topic-top-height);
  --app-service-center-content-module-for-topic-top-title-wrapper-title-height: 85%;
  --app-service-center-content-module-for-topic-top-input-wrapper-height: var(--app-service-center-content-module-for-topic-top-height);
  /* center => 14rem inherit from --app-service-center-content-module-center-wrapper-height */
  --app-service-center-content-module-for-topic-center-height: var(--app-service-center-content-module-center-wrapper-height);
  --app-service-center-content-module-for-topic-center-btn-wrapper-height: var(--app-service-center-content-module-for-topic-center-height);
  /* bottom => 2.5rem inherit from --app-service-center-content-module-bottom-wrapper-height*/
  --app-service-center-content-module-for-topic-bottom-height: var(--app-service-center-content-module-bottom-wrapper-height);
  --app-service-center-content-module-for-topic-bottom-btn-wrapper-height: var(--app-service-center-content-module-for-topic-bottom-height);
  /* font-weight */
  --app-service-center-content-module-for-topic-top-title-wrapper-title-font-size: var(--assist-font-size-extra-large);
  --app-service-center-content-module-for-topic-top-title-wrapper-title-font-weight: bold;

  /* ---------------------------------------------*/
  /* ...............app-account...................*/
  /* ---------------------------------------------*/
  --app-account-width: 50rem;
  --app-account-height: 24.2rem;
  /* -----------------------------------------*/
  /* .........app-account-security............*/
  /* -----------------------------------------*/
  /* width */
  --app-security-width: 14.5rem;
  --app-security-title-wrapper-width: var(--app-security-width);
  --app-security-center-wrapper-width: var(--app-security-width);
  /* height */
  --app-security-height: 18.5rem;
  --app-security-title-wrapper-height: 1.5rem;
  --app-security-title-wrapper-margin-bottom: 0rem;
  --app-security-center-wrapper-height: 14.5rem;
  /* -----------------------------------------*/
  /* ..........app-security-center............*/
  /* -----------------------------------------*/
  --app-security-center-width: var(--app-security-center-wrapper-width);
  --app-security-center-height: var(--app-security-center-wrapper-height);
  /* -----------------------------------------*/
  /* ..........app-security-title.............*/
  /* -----------------------------------------*/
  --app-security-title-width: var(--app-security-center-wrapper-width);
  --app-security-title-height: var(--app-security-center-wrapper-height);
  /* -----------------------------------------*/
  /* .....app-security-center-module..........*/
  /* -----------------------------------------*/
  /* total height */
  --app-security-center-module-height: var(--app-security-center-height);
  --app-security-center-module-padding: 0.75rem 1.5rem;
  --app-security-center-module-top-wrapper-height: 1.5rem;
  --app-security-center-module-top-wrapper-margin-bottom: 0.5rem;
  --app-security-center-module-horizontal-devision-height: 0.05rem;
  --app-security-center-module-horizontal-devision-margin-bottom: 0.45rem;
  --app-security-center-module-center-wrapper-height: 9.5rem;
  --app-security-center-module-bottom-wrapper-height: 2.5rem;
  /* total width */
  --app-security-center-module-width: var(--app-security-center-width);
  --app-security-center-module-top-wrapper-width: 100%;
  --app-security-center-module-horizontal-devision-width: 80%;
  --app-security-center-module-center-wrapper-width: 100%;
  --app-security-center-module-bottom-wrapper-width: 100%;
  --app-security-center-module-border-radius: var(--border-radius-normal);
  --app-security-center-module-background-color: var(--panel-background-color);
  /* horizontal-devision */
  --app-security-center-module-horizontal-devision-background-color: var(--color-light-gray);
  /* -----------------------------------------*/
  /* ........app-security-center-login........*/
  /*...prototype:app-security-center-module...*/
  /* -----------------------------------------*/
  /* login top for module top slot */
  --app-security-center-login-top-width: 100%;
  --app-security-center-login-title-wrapper-width: 100%;
  --app-security-center-login-top-height: var(--app-security-center-module-top-wrapper-height);
  --app-security-center-login-title-wrapper-height: var(--app-security-center-login-top-height);
  --app-security-center-login-title-wrapper-font-size: var(--assist-font-size-large);
  /* login center for module center slot*/
  --app-security-center-login-center-height: 8.5rem;
  --app-security-center-login-center-input-wrapper-height: 2rem;
  --app-security-center-login-center-input-wrapper-margin-bottom: 0.5rem;
  --app-security-center-login-center-other-wrapper-height: 1rem;
  --app-security-center-login-center-other-wrapper-margin-bottom: 0.5rem;
  --app-security-center-login-center-other-wrapper-auto-login-height: var(--app-security-center-login-center-other-wrapper-height);
  --app-security-center-login-center-other-wrapper-forget-password-height: var(--app-security-center-login-center-other-wrapper-height);
  --app-security-center-login-center-other-wrapper-register-user-height: var(--app-security-center-login-center-other-wrapper-height);
  --app-security-center-login-center-btn-wrapper-height: 1.5rem;
  --app-security-center-login-center-btn-wrapper-margin-bottom: 0.5rem;
  /* width */
  --app-security-center-login-center-width: 100%;
  --app-security-center-login-center-input-wrapper-width: 100%;
  --app-security-center-login-center-btn-wrapper-width: 100%;
  --app-security-center-login-center-other-wrapper-width: 95%;
  --app-security-center-login-center-other-wrapper-auto-login-width: 30%;
  --app-security-center-login-center-other-wrapper-forget-password-width: 40%;
  --app-security-center-login-center-other-wrapper-register-user-width: 30%;
  --app-security-center-login-center-other-wrapper-font-size: var(--assist-font-size-small);
  /* login bottom for module bottom slot*/
  --app-security-center-login-bottom-width: 100%;
  --app-security-center-login-bottom-height: 3.5rem;
  --app-security-center-login-bottom-social-account-wrapper-width: 100%;
  --app-security-center-login-bottom-social-account-wrapper-height: var(--app-security-center-login-bottom-height);
  /* -----------------------------------------*/
  /* ........app-security-center-logout........*/
  /*...prototype:app-security-center-module...*/
  /* -----------------------------------------*/
  /* logout top for module top slot */
  --app-security-center-logout-top-width: 100%;
  --app-security-center-logout-title-wrapper-width: 100%;
  --app-security-center-logout-top-height: var(--app-security-center-module-top-wrapper-height);
  --app-security-center-logout-title-wrapper-height: var(--app-security-center-logout-top-height);
  --app-security-center-logout-title-wrapper-font-size: var(--assist-font-size-extra-large);
  /* logout center for module center slot */
  --app-security-center-logout-center-height: 8.5rem;
  --app-security-center-logout-center-info-wrapper-height: 5.5rem;
  --app-security-center-logout-center-info-wrapper-margin-bottom: 0.5rem;
  --app-security-center-logout-center-btn-wrapper-height: 1.5rem;
  --app-security-center-logout-center-btn-wrapper-margin-bottom: 0.5rem;
  /* width */
  --app-security-center-logout-center-width: 100%;
  --app-security-center-logout-center-info-wrapper-width: 100%;
  --app-security-center-logout-center-btn-wrapper-width: 100%;
  /* logout bottom for module bottom slot*/
  --app-security-center-logout-bottom-width: 100%;
  --app-security-center-logout-bottom-height: 3.5rem;
  /* --------------------------------------*/
  /* ..........app-toolbox.................*/
  /* --------------------------------------*/
  --app-toolbox-width: 50rem;
  --app-toolbox-height: var(--app-height);
  /* ------------------------------------------*/
  /* ..........app-toolbox-xmap.............*/
  /* ------------------------------------------*/
  /* height */
  --app-toolbox-xmap-width: 100%;
  --app-toolbox-xmap-height: var(--app-toolbox-height);
  --app-toolbox-xmap-navbar-wrapper-width: 100%;
  --app-toolbox-xmap-navbar-wrapper-height: 1.8rem;
  --app-toolbox-xmap-center-wrapper-top: var(--app-toolbox-xmap-navbar-wrapper-height);
  --app-toolbox-xmap-center-wrapper-bottom: 0;
  --app-toolbox-xmap-center-wrapper-left: 0;
  --app-toolbox-xmap-center-wrapper-right: 0;
  /* -----------------------------------------*/
  /* .......app-toolbox-xmap-navbar........*/
  
  /* -----------------------------------------*/
  /* width */
  --app-toolbox-xmap-navbar-width: 100%;
  --app-toolbox-xmap-navbar-items-wrapper-width: 32rem;
  --app-toolbox-xmap-navbar-funcs-wrapper-width: 18rem;
  
  --app-toolbox-xmap-navbar-items-wrapper-topic-width: 7.5rem;
  
  --app-toolbox-xmap-navbar-items-wrapper-module-width: 24.5rem;
  --app-toolbox-xmap-navbar-items-wrapper-module-label-width: 2.5rem;
  --app-toolbox-xmap-navbar-items-wrapper-module-btn-wrapper-width: 22rem;
  
  /* height */
  --app-toolbox-xmap-navbar-height: var(--app-toolbox-xmap-navbar-wrapper-height);
  --app-toolbox-xmap-navbar-btns-wrapper-height: var(--app-toolbox-xmap-navbar-height);
  --app-toolbox-xmap-navbar-items-wrapper-height: var(--app-toolbox-xmap-navbar-height);
  --app-toolbox-xmap-navbar-funcs-wrapper-height: var(--app-toolbox-xmap-navbar-height);
  --app-toolbox-xmap-navbar-funcs-wrapper-func-height: var(--app-toolbox-xmap-navbar-funcs-wrapper-height);
  --app-toolbox-xmap-navbar-funcs-wrapper-func-btn-width: 2.5rem;
  --app-toolbox-xmap-navbar-funcs-wrapper-func-synchronize-width: 3.5rem;
  --app-toolbox-xmap-navbar-background-color: var(--color-light-black);
  --app-toolbox-xmap-navbar-items-wrapper-item-label-color: var(--color-white);
  --app-toolbox-xmap-navbar-items-wrapper-item-label-font-size: var(--assist-font-size-mini);
  /* -----------------------------------------*/
  /* .......app-toolbox-xmap-center........*/
  /* -----------------------------------------*/
  /* width */
  --app-toolbox-xmap-center-width: 100%;
  /* height */
  --app-toolbox-xmap-center-height: 100%;
  --app-toolbox-xmap-center-kity-width: 100%;
  --app-toolbox-xmap-center-kity-height: 100%;
  /* -----------------------------------------*/
  /* .......app-toolbox-xmap-dialog........*/
  /* -----------------------------------------*/
  
  --app-toolbox-xmap-dialog-content-width: 100%;
  --app-toolbox-xmap-dialog-content-height: 15rem;
  --app-toolbox-xmap-dialog-content-lpart-width: 50%;
  --app-toolbox-xmap-dialog-content-lpart-height: 100%;
  
}